<script lang="ts" setup>
import { useTagsViewStore } from "@/store/modules/tags-view";
// import { useSettingsStore } from "@/store/modules/settings"
// import Footer from "./Footer/index.vue"

const tagsViewStore = useTagsViewStore()
// const settingsStore = useSettingsStore()
</script>

<template>
  <section class="app-main">
    <router-view v-slot="{ Component, route }">
      <div :class="['app-scrollbar', { full: route.meta.isFull, hidden: route.meta.isHidden }]">
        <transition name="el-fade-in" mode="out-in">
          <keep-alive :include="tagsViewStore.cachedViews">
            <div class="content-main">
              <component :is="Component" :key="route.path" class="app-container-grow" />
            </div>
          </keep-alive>
        </transition>
        <!-- key 采用 route.path 和 route.fullPath 有着不同的效果，大多数时候 path 更通用 -->

        <!-- 页脚 -->
        <!-- <Footer v-if="settingsStore.showFooter" /> -->
      </div>
    </router-view>

    <!-- 返回顶部 -->
    <el-backtop />
    <!-- 返回顶部（固定 Header 情况下） -->
    <el-backtop :bottom="100" target=".app-scrollbar" />
  </section>
</template>

<style lang="scss" scoped>
@import "@/styles/mixins.scss";
.content-main {
  width: 100%;
  height: 100%;
  position: relative;
}
.app-main {
  width: 100%;
  background-color: var(--v3-body-bg-color);
  display: flex;
}

.app-scrollbar {
  flex-grow: 1;
  overflow: auto;
  @extend %scrollbar;
  display: flex;
  flex-direction: column;
  padding: 30px;
  &.full {
    padding: 0;
  }
  &.hidden {
    overflow: hidden;
  }

  .app-container-grow {
    flex-grow: 1;
  }
}
</style>
